<template>
  <!--  水文 -->
  <div class="fuse">
    <div class="fuse-left-side">
      <!-- <happy-scroll color="rgba(0,0,0,0.5)" size="5"> -->
      <div>
        <div class="fuse-side_top" style="height: 1.5rem" :style="Img">
          <div
            class="fuse-title"
            style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
          >
            <img
              style="width: 0.4rem; margin-left: -0.1rem"
              src="../../../assets/images/img10.png"
              alt=""
            />
            <span style="vertical-align: top">基本信息</span>
          </div>
          <p class="tit" style="margin-top: 0.2rem">水文地质类型：</p>
          <p class="tit">水害类型：</p>
        </div>
        <div class="border fuse-side_middle">
          <div
            class="fuse-title"
            style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
          >
            <img
              style="width: 0.4rem; margin-left: -0.1rem"
              src="../../../assets/images/img10.png"
              alt=""
            />
            <span style="vertical-align: top">实时报警</span>
          </div>
          <el-table style="margin-top: 10px" class="backtable" height="285Px">
            <el-table-column prop="dtName" label="名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="dtStatus"
              label="报警值"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="dtPhone" label="状态" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="dtPhone"
              label="报警时间"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="border fuse-side_middle">
          <div
            class="fuse-title"
            style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
          >
            <img
              style="width: 0.4rem; margin-left: -0.1rem"
              src="../../../assets/images/img10.png"
              alt=""
            />
            <span style="vertical-align: top">水害防治</span>
          </div>
          <el-table style="margin-top: 10px" class="backtable" height="285Px">
            <el-table-column prop="dtName" label="名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="dtStatus"
              label="监测值"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="dtPhone" label="状态" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="dtPhone"
              label="监测时间"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- </happy-scroll> -->
    </div>
    <div class="fuse-right-side">
      <!-- <happy-scroll color="rgba(0,0,0,0.5)" size="5"> -->
      <div>
        <div class="fuse-side_top" style="height: 2.7rem" :style="Img">
          <div
            class="fuse-title"
            style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
          >
            <img
              style="width: 0.4rem; margin-left: -0.1rem"
              src="../../../assets/images/img10.png"
              alt=""
            />
            <span style="vertical-align: top">涌水量监测(m³/h)</span>
          </div>
          <el-table class="backtable" height="200Px">
            <el-table-column prop="dtName" label="监测点" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dtStatus" label="数值" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div class="border fuse-side_middle">
          <div
            class="fuse-title"
            style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
          >
            <img
              style="width: 0.4rem; margin-left: -0.1rem"
              src="../../../assets/images/img10.png"
              alt=""
            />
            <span style="vertical-align: top">水仓水位监测(m³/h)</span>
          </div>
          <el-table class="backtable" height="235Px">
            <el-table-column prop="dtName" label="监测点" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dtStatus" label="数值" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
        <div class="border fuse-side_middle">
          <div
            class="fuse-title"
            style="height: 0.4rem; line-height: 0.4rem; padding-top: 0.1rem"
          >
            <img
              style="width: 0.4rem; margin-left: -0.1rem"
              src="../../../assets/images/img10.png"
              alt=""
            />
            <span style="vertical-align: top">降雨量监测(m³/h)</span>
          </div>
          <el-table class="backtable" height="235Px">
            <el-table-column prop="dtName" label="监测点" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dtStatus" label="数值" show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- </happy-scroll> -->
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      Img: {
        backgroundImage: 'url(' + require('@/assets/images/img13.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tit {
  line-height: 35px;
  margin-left: 0.2rem;
}
</style>
